// 基础使用
$('#table').bootstrapTable({
  columns: [{   // 表列配置对象，请参阅列属性以获取更多详细信息。
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }],
  data: [{    // 要加载的数据。
    id: 6,
    name: "wwj",
    price: "123"
  }, {
    id: 2,
    name: "wwj2",
    price: "134"
  }, {
    id: 3,
    name: "wwj3",
    price: "234"
  }, {
    id: 4,
    name: "wwj4",
    price: "34"
  }, {
    id: 5,
    name: "wwj5"
  }],
  // height: '200',    // 表的高度，启用表的固定标题。
  // virtualScroll: true,  // 设置 true 为启用虚拟滚动以显示虚拟的 “infinite” 列表。
  // classes: "table",  // 表的类名。'table', 'table-bordered', 'table-hover', 'table-striped', 'table-dark', 'table-sm' 和 'table-borderless' 可被使用。默认情况下，表格是有界的
  // theadClasses: "test",  // 设置表thead的样式，直接写入类名即可，可以自定义类样式
  // undefinedText: "@@",    // 定义默认文本。即是在没有数据的时候，单元格显示的内容

  // sortable: true,    // 设置 false为禁用所有列的可排序。 要与其他属性(sortName)配合使用
  // sortName: 'price',    // 定义要排序的列。
  // sortClass: "test",    // td 排序的元素的类名称。
  // silentSort: false ,   // 察觉不到有什么变化
  // sortOrder: 'desc',      // 定义列的排序顺序，只能是'asc' 或 'desc'.
  // sortStable: true // 设置 true以获得稳定的排序。我们将'_position' 属性添加到该行。 察觉不到有什么变化
  // customSort: function(){},   // 执行自定义排序功能而不是内置的排序功能，它需要三个参数：sortName: 排序名称。sortOrder: 排序顺序。data: 行数据。

  // headerStyle: function (column) {   // 标头样式格式化程序函数,该属性不起作用，在测试时
  //   console.log('column', column)
  //   return {
  //     css: { "color": "red" },
  //     classes: "test"
  //   }
  // },
  // rowStyle: function(row, index){   // 行样式格式化程序函数，能进行到每一行
  //   console.log('row', row, index)
  //   if(index > 2){
  //     return {
  //       css: {"color": "red"}
  //     }
  //   }else{
  //     return false;
  //   }
  // },
  // rowAttributes: function (row, index) {   // 行属性格式化程序函数，作用未知
  //   console.log('row', row, index)
  //   return {
  //     css: { "color": "red" }
  //   }
  // }
})

// 调用远程数据
$("#table2").bootstrapTable({
  columns: [{   // 表列配置对象，请参阅列属性以获取更多详细信息。
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }],

  url: "http://127.0.0.1:3002/table2",  // 一个从远程站点请求数据的URL。
  method: "get",     // 请求远程数据的方法类型。
  cache: false,     // 设置false为禁用AJAX请求的缓存。默认:true
  contentType: "application/x-www-form-urlencoded", // 请求远程数据的contentType，例如：application/x-www-form-urlencoded.、默认:'application/json'
  dataType: "json",   // 您期望从服务器返回的数据类型。
  // ajaxOptions: {},   // 提交ajax请求的其他选项。值列表：jQuery.ajax.
  // queryParams: function (params) {    // 请求远程数据时，可以通过修改queryParams发送其他参数。返回 false停止请求。
  //   console.log('params', params)
  //   return {
  //     "offset": params.offset,
  //     "limit": params.limit,
  //     "sort": params.sort,
  //     "search": params.search,
  //     "order": params.order,
  //     "otherParams": "otherParams~~~",
  //   }
  // },
  // queryParamsType: "limit",     // 设置'limit'为发送具有RESTFul类型的查询参数。默认:'limit'C
  // responseHandler:function(res, jqXHR){  // 在加载远程数据之前，处理响应数据格式
  //   console.log('res~~', res)
  //   return res;
  // },  

  // ajax: function (params) {   // 一种替换ajax调用的方法。应该实现与jQuery ajax方法相同的API。
  //   $.ajax({
  //     url: "http://127.0.0.1:3002/table2",
  //     type: "get",
  //     dataType: "json",
  //     contentType: "application/x-www-form-urlencoded",
  //     success: function (rs) {
  //       console.log("rs", rs)
  //       params.success({ //注意，必须返回参数 params
  //         // total: rs.total,     // 返回数据的总数
  //         rows: rs    // 返回的数据
  //       });
  //     },
  //     error: function (rs) {
  //       console.log("error", rs)
  //     }
  //   });
  // }

})

// 分页
$("#table3").bootstrapTable({
  columns: [{   // 表列配置对象，请参阅列属性以获取更多详细信息。
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }],

  url: "http://127.0.0.1:3002/table2",  // 一个从远程站点请求数据的URL。
  method: "get",     // 请求远程数据的方法类型。
  cache: false,     // 设置false为禁用AJAX请求的缓存。默认:true
  contentType: "application/x-www-form-urlencoded", // 请求远程数据的contentType，例如：application/x-www-form-urlencoded.、默认:'application/json'
  dataType: "json",   // 您期望从服务器返回的数据类型。
  responseHandler: function (res, jqXHR) {  // 在加载远程数据之前，处理响应数据格式
    console.log('res~~', res)
    return res;
  },

  pagination: true,   // 设置true 为在表格底部显示分页工具栏。默认:false
  // onlyInfoPagination: true,    // 设置true为仅显示表中显示的数据量。它需要将分页表选项设置为true。
  paginationLoop: true,     // 设置true为启用分页连续循环模式。
  // totalRows: 0,   // 此属性主要由分页服务器传入，该服务器易于使用。
  pageNumber: 1,      // 设置分页属性时，请初始化页码。
  pageSize: 3,        // 设置分页属性时，初始化页面大小。
  pageList: [3, 5, 10, 25, 50, 100, 'all'],    // 设置分页属性时，初始化页面数量多少的选择列表。
  paginationHAlign: "right",    // 指示如何对齐分页。'left', 'right' 可以使用。
  // paginationVAlign: "both",     // 指示如何垂直对齐分页。'top', 'bottom', 'both'（穿上顶部和底部的分页）都可以使用。
  paginationDetailHAlign: "right",    // 指示如何对齐分页细节 'left', 'right' 可以使用。 作用未知
  paginationPreText: "<-",      // 指示要在分页详细信息中显示的图标或文本，即上一页按钮的内容。 
  paginationNextText: "->",     // 指示要在分页详细信息（下一页按钮）中显示的图标或文本。
  paginationSuccessivelySize: 3,    // 连续的最大连续页数。
  paginationPagesBySide: 3,     // 当前页面每侧（右侧，左侧）的页数。
  paginationUseIntermediate: true,  // 计算并显示中间页面以便快速访问。
})

// 搜索
$("#table4").bootstrapTable({
  columns: [{   // 表列配置对象，请参阅列属性以获取更多详细信息。
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }],

  url: "http://127.0.0.1:3002/table2",  // 一个从远程站点请求数据的URL。
  contentType: "application/x-www-form-urlencoded", // 请求远程数据的contentType，例如：application/x-www-form-urlencoded.、默认:'application/json'

  pagination: true,   // 设置true 为在表格底部显示分页工具栏。默认:false
  pageSize: 3,        // 设置分页属性时，初始化页面大小。

  search: true,
  // searchOnEnterKey: true,   // 直达按下enter键后才执行搜索方法。默认:false
  // strictSearch: true,   // 启用严格搜索。禁用比较检查。则是完成符合才进行查询
  visibleSearch: true,  // 设置true 为仅在可见列/数据中搜索，如果数据包含其他未显示的值，则在搜索时将忽略它们。
  showSearchButton: true, // 设置true 为在搜索输入后面显示搜索按钮。仅在按下按钮时才会执行搜索（例如，以防止交通或加载时间）。
  showButtonIcons: true,  // 所有按钮都将在其上显示图标
  showSearchClearButton: true, // 设置true为在搜索输入后面显示一个清除按钮，该按钮将清除搜索输入（还包括来自过滤器控件的所有过滤器（如果启用））。
  trimOnSearch: true,     // 设置true 为修剪搜索字段中的空格。
  searchAlign: "left",    // 指示如何对齐搜索输入。'left', 'right' 可以使用。
  searchTimeOut: 1000,      // 设置搜索触发超时。
  searchText: '',           // 设置搜索属性后，初始化搜索文本。

  showButtonText: true,   // 所有按钮都将在其上显示文本

  // customSearch: function (data, text, filter) {   // 执行自定义搜索功能而不是内置搜索功能
  //   // data: 表格数据。
  //   // text: 搜索文字。
  //   // filter: filterBy 方法中的过滤器对象。
  //   // return data.filter(function(row){
  //   //   return row.field.indexOf(text)>-1
  //   // })
  // }
})

// 5、工具栏
$("#table5").bootstrapTable({
  columns: [{   // 表列配置对象，请参阅列属性以获取更多详细信息。
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }, {
    field: 'age',
    title: 'Item age'
  }, {
    field: 'email',
    title: 'Item email'
  }],

  url: "http://127.0.0.1:3002/table2",  // 一个从远程站点请求数据的URL。
  contentType: "application/x-www-form-urlencoded", // 请求远程数据的contentType，例如：application/x-www-form-urlencoded.、默认:'application/json'

  pagination: true,   // 设置true 为在表格底部显示分页工具栏。默认:false
  pageSize: 3,        // 设置分页属性时，初始化页面大小。

  search: true,
  searchAlign: "left",    // 指示如何对齐搜索输入。'left', 'right' 可以使用。


  showButtonText: true,   // 所有按钮都将在其上显示文本

  showHeader: true,  // 设置false 为隐藏表格标题。
  showFooter: true,    // 设置true 为显示摘要页脚行。
  footerStyle: function (column) {    // 页脚样式格式化程序函数
    return {
      css: { 'background-color': 'red' },
      classes: 'my-class'
    }
  },
  showColumns: true,    // 设置true 为显示列下拉列表。我们可以将 switchable选项设置false为隐藏下拉列表中项目。
  showColumnsToggleAll: true, // 设置true 为在列选项/下拉列表中显示“全部切换”复选框。
  showColumnsSearch: true,    // 设置true 为显示对列过滤器的搜索。 作用未知
  minimumCountColumns: 2,     // 从列下拉列表中隐藏的最小列数。也就是最少要剩余的个数
  showPaginationSwitch: true, // 设置true 为显示分页开关按钮。
  showRefresh: true,          // 设置true为显示刷新按钮。
  showToggle: true,           // 设置true显示切换按钮以切换表格/卡片视图。
  showFullscreen: true,       // 设置true显示全屏按钮。
  smartDisplay: true,         // 设置true为智能显示分页或名片视图。
})


// 二：6、列表选项
$("#table6").bootstrapTable({
  columns: [{   // 表列配置对象，请参阅列属性以获取更多详细信息。
    field: 'id',
    title: 'Item ID',
    titleTooltip: 'iddd',  // 列标题工具提示文本。此选项还支持标题HTML属性。
    class: 'test',          // 列类名称。
    width: 200,       // 列的宽度。如果未定义，宽度将自动扩展以适合其内容。
    widthUnit: 'px',  // 用于定义width选项的单位.
    rowspan: 1,      // 指示单元格应占用的行数。
    colspan: 1,     // 指示单元格应占用的列数。
    align: "center",  // 指示如何对齐列数据。'left', 'right', 'center' 都可以使用。
    halign: "left",   // 指示如何对齐表头。'left', 'right', 'center' 都可以使用。
    falign: "center",   //指示如何对齐表格页脚。 'left', 'right', 'center' 都可以使用。
    valign: "bottom",     // 指出如何对齐单元格数据'top', 'middle', 'bottom' 都可以使用。
    cellStyle: function (value, row, index, field) { return false },  // 单元格样式格式化函数
    // 还有大概一半，，，

  }, {
    field: 'biaodan',
    title: 'Item biaodan',
    radio: true,    // 设置true 为显示收音机。无线电列具有固定宽度。
    // checkbox: true,     // 设置true 为显示一个复选框。复选框列具有固定宽度。
    showSelectTitle: true, // 设置true 为使用'radio'或'singleSelect''复选框'选项显示列的标题。
    // 还有。。。
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }, {
    field: 'age',
    title: 'Item age'
  }, {
    field: 'email',
    title: 'Item email'
  }],

  url: "http://127.0.0.1:3002/table2",  // 一个从远程站点请求数据的URL。
  contentType: "application/x-www-form-urlencoded", // 请求远程数据的contentType，例如：application/x-www-form-urlencoded.、默认:'application/json'

  pagination: true,   // 设置true 为在表格底部显示分页工具栏。默认:false
  pageSize: 3,        // 设置分页属性时，初始化页面大小。

  search: true,
  searchAlign: "left",    // 指示如何对齐搜索输入。'left', 'right' 可以使用。

  showButtonText: true,   // 所有按钮都将在其上显示文本
})

// 三：7、列表方法
function getOptions() {   // 返回选项对象。
  var getOptions = $("#table6").bootstrapTable("getOptions")
  console.log('getOptions', getOptions)
}
function refreshOptions() {   // 刷新表格options. 和refresh方法有点区别：https://blog.csdn.net/csdnluolei/article/details/85125740
  var getOptions = $("#table6").bootstrapTable("refreshOptions", {})
  console.log('getOptions', getOptions)
}
function getData() {    // 在调用此方法时获取表的加载数据
  var getOptions = $("#table6").bootstrapTable("getData")
  console.log('getOptions', getOptions)
}
function getSelections() {    // 返回选定的行，如果未选择任何记录，则返回一个空数组。
  var getOptions = $("#table6").bootstrapTable("getSelections")
  console.log('getOptions', getOptions)
}
function getAllSelections() {    // 返回所有选定的行包含搜索或过滤，当没有选择记录时，将返回一个空数组。
  var getOptions = $("#table6").bootstrapTable("getAllSelections")
  console.log('getOptions', getOptions)
}
function load() {    // 加载 data 到表，旧行将被删除。
  var getOptions = $("#table6").bootstrapTable("load", [])
  console.log('getOptions', getOptions)
}
function append() {    // 附加data到表格。
  var getOptions = $("#table6").bootstrapTable("append", [{
    id: 88,
    name: "~点击"
  }])
  console.log('getOptions', getOptions)
}
function prepend() {    // 前置data到表。
  var getOptions = $("#table6").bootstrapTable("prepend", [{
    id: 9098,
    name: "~在前面了"
  }])
  console.log('getOptions', getOptions)
}
function remove() {    // 从表中删除数据，params包含两个属性：
  var getOptions = $("#table6").bootstrapTable("remove", {
    field: "name", // 删除行的字段名称。
    values: "lisi"  //  应删除的行的值数组。
  })
  console.log('getOptions', getOptions)
}
function removeAll() {    // 从表中删除所有数据。
  var getOptions = $("#table6").bootstrapTable("removeAll")
  console.log('getOptions', getOptions)
}
function insertRow() {    // 插入一个新行，params包含以下属性：
  var getOptions = $("#table6").bootstrapTable("insertRow", {
    index: 0, // index: 要插入的行索引。
    row: {// row: 行数据。
      id: 0,
      name: "djfeo"
    }
  })
  console.log('getOptions', getOptions)
}
function updateRow() {    // 更新指定的行，每个参数包含以下属性：
  var getOptions = $("#table6").bootstrapTable("updateRow", {
    index: 0, //要更新的行索引
    row: {// 新的行数据。 
      id: 0,
      name: "djfe~~o"
    },
    replace: true // 可选）:设置为true 替换行而不是扩展。
  })
  console.log('getOptions', getOptions)
}
// 还有大约一半的方法没有实现案例。。。
